<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>样式2宽度还原200px</title>
	<style type="text/css">
	*{margin: 0px;padding: 0px;}
	ul,li{
		list-style: none;
	}
	ul li{
		width: 200px;
		height: 100px;
		background: yellow;
		margin-bottom: 20px;
		border:2px solid red;
	}
	</style>
	<script type="text/javascript">
		window.onload=function(){
			var aLi=document.getElementsByTagName('li');
			for (var i = 0; i < aLi.length; i++) {
				aLi[i].timer=null;
				aLi[i].onmouseover=function(){
					startMove(this,400);
				}
				aLi[i].onmouseout=function(){
					startMove(this,200);
				}
			}
		}

		//var timer=null;
		function startMove(obj,iTarget){
			clearInterval(obj.timer);
			obj.timer=setInterval(function(){
			var icur=parseInt(getStyle(obj,'width'));
				var speed =(iTarget-icur)/8;
				speed =speed>0?Math.ceil(speed):Math.floor(speed);
				if (icur==iTarget) {
					clearInterval(obj.timer);
				}else{
					obj.style['width'] = icur + speed + 'px';
				}
			},30)
		}
		
		function getStyle(obj,attr){
			if (obj.currentStyle) {
				return obj.currentStyle[attr];//IE
			}else{
				return getComputedStyle(obj,false)[attr];//火狐
			}
		}
	</script>
</head>
<body>
	<ul>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</body>
</html>